<template>
<div>
  <city-header></city-header>
  <city-search :cities='cities'></city-search>
  <city-list
    :hotCities='this.hotCities'
    :cities='this.cities'
    :letter='letter'
    ></city-list>
  <alphabet :cities='this.cities' @change='btnLetterChange'></alphabet>
</div>
</template>
<script>
import cityHeader from './components/cityHeader'
import citySearch from './components/citySearch'
import cityList from './components/cityList'
import alphabet from './components/alphabet'
import axios from 'axios'
export default {
  name: 'city',
  components: {
    cityHeader,
    citySearch,
    cityList,
    alphabet
  },
  data () {
    return {
      hotCities: [],
      cities: {},
      letter: ''
    }
  },
  methods: {
    getCitiesInfo () {
      axios.get('static/mock/city.json')
        .then(this.getInfoSucc)
    },
    getInfoSucc (res) {
      const data = res.data
      this.hotCities = data.data.hotCities
      this.cities = data.data.cities
    },
    btnLetterChange (letter) {
      this.letter = letter
    }
  },
  mounted () {
    this.getCitiesInfo()
  }
}
</script>

<style lang='stylus' scoped></style>
